<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            padding-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-image: url("../../images/background.jpg");
            background-size: cover;
            background-position: center;
        }

        .login-container {
            max-width: 400px;
            margin: 0 auto 0 10px;
            background-color: #d0dfe6;
            opacity: 0.8;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 2px 5px rgba(0, 0, 0,0.1);
        }

        .login-form {
            margin-top: 30px;

        }

        .login-form h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .login-form input {
            width: 95%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-form button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .login-form button:hover {
            background-color: #93b5cf;
        }

        .login-type {
            margin-bottom: 15px;
        }

        .login-type button {
            width: 35%;
            display: block;
            margin: 0 auto;
        }

        h1 {
            padding-bottom: 700px;
            padding-left: 500px;
            color: #68b88e ; /* 设置标题文本颜色为白色 */
            font-size: 60px; /* 设置标题文本字体大小 */
            font-weight: bold; /* 设置标题文本字体粗细 */
            font-family: SimSun, sans-serif;
        }

    </style>
</head>

<body>
<div>
    <h1>校企慧公共服务平台</h1>
</div>
<div class="login-container">
    <div class="login-form">

        <h2>登录方式</h2>

        <div class="login-type" v-if="!isPhoneLogin">
            <button @click="switchToPhoneLogin">手机号/验证码登录</button>
        </div>

        <div class="login-type" v-else>
            <button @click="switchToUsernameLogin">用户名/密码登录</button>
        </div>

        <div v-if="!isPhoneLogin">
            <label>用户名:</label>
            <input type="text" v-model="username" placeholder="请输入用户名">

            <label>密码:</label>
            <input type="password" v-model="password" placeholder="请输入密码">

            <button @click="loginWithUsernameAndPassword">登录</button>
        </div>

        <div v-else>
            <label>手机号:</label>
            <input type="text" v-model="phone" placeholder="请输入手机号">

            <label>验证码:</label>
            <input type="text" v-model="verificationCode" placeholder="请输入验证码">

            <button @click="sendVerificationCode">获取验证码</button>

            <button @click="loginWithPhoneAndVerificationCode">登录</button>
        </div>
    </div>
</div>

<script src="../../js/vue.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../front/js/login.js"></script>

</body>
</html>
